// MACROS
.transition(...) {  // http://stackoverflow.com/a/14988517/3423324
@props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
-webkit-transition: @props;
-moz-transition: @props;
-o-transition: @props;
transition: @props;
}


// COLORS
@node-highlight: cadetblue;
@node-highlight-hover: #7cf1ca;

@node-normal: cornflowerblue;
@node-normal-hover: #1972ff;

@node-leader: #c4e3f3;
@node-leader-hover: @node-highlight-hover;

@bg-color: #124;


// Colors for Message Types
@msg-type1: #7cf1cb;
@msg-type2: #85b9f0;
@msg-type3: #ffcd83;
@msg-type4: #ffad83;

@msg-init: @msg-type1;
@msg-propose: @msg-type2;
@msg-prevote: @msg-type3;
@msg-vote: @msg-type4;


// STYLES
/* app css stylesheet */
body {
  margin: 0;
  font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
  font-variant: small-caps;
}


//.menu {
//  list-style: none;
//  border-bottom: 0.1em solid black;
//  margin-bottom: 2em;
//  padding: 0 0 0.5em;
//}
//
//.menu:before {
//  content: "[";
//}
//
//.menu:after {
//  content: "]";
//}
//
//.menu > li {
//  display: inline;
//}
//
//.menu > li + li:before {
//  content: "|";
//  padding-right: 0.3em;
//}

th, td {
  padding: 5px;
  border: 1px dashed white;
}

input {
  color: black;
}

#container {
  width: 100%;
  height: 100vh;
  margin: 0 auto 0 auto;
  border: 0 solid transparent;
  background-color: @bg-color;
}

#menubar {
  width: 100%;
  padding-top: 2vh;
  background-color: lightgray;
  margin: 0 auto 0 auto;
  display: table;
  border-spacing: 10px 0;
  text-align: center;

  a {
    background-color: @bg-color;
    height: 5vh;
    vertical-align: middle;
    border-width: 0 5px 0 5px;
    border-radius: 7px 7px 0 0;
    margin: 0 3% 0 3%;
    padding: 1%;
    display: inline-block;
    color: white;
    text-decoration: none;
    width: 40%;

    &:hover {
      background-color: #126;
      color: @node-highlight-hover;
    }
  }
}

#main {
  width: 100%;
  background-color: @bg-color;
  color: white;
}

#footer {
  width: 100%;
  display: block;
  height: 5vh;
  position: fixed;
  bottom: 0;
  background-color: @bg-color;

  .footer-fillin {
    width: 10%;
    height: 100%;
    float: left;
  }

  #footer-content {
    width: 80%;
    height: 100%;
    float: left;
    text-align: center;
    color: white;
    border-top: 1px solid white;
  }
}

#nodearea {
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 3% 10px; //top+bottom  left+right
  background-color: @bg-color;

  .no_data {
    text-align: center;
    width: 100%;
    padding-top: 2em;
  }

  &, .node-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .node {
    flex: 1 0 auto;
    display: inline-block;
    position: relative;
    opacity: 1;
    text-align: center;
    //width: 18%;
    margin-right: 1%;
    margin-left: 1%;
    margin-bottom: 2.1em;
    //margin: 3% 1% 1% 1%;
    box-sizing: border-box;
    color: black;
    .transition(width .3s ease-out, height .2s ease-out);

    a, a:visited {
      color: black;
      text-decoration: none;
    }

    .node-main {
      border-color: transparent;
      border-radius: 0.5em;
      border-width: 0 5px 0 5px;
      border-style: solid;
      background-color: @node-normal;
      box-sizing: border-box;
      padding: 0.5em 1%;
    }

    h3, h5 {
      margin-bottom: 0;
      margin-top: 0;
      .transition(font-size .3s ease-out, opacity .3s ease-out);
    }

    .click-hint-wrapper {
      height: 1.4em;
      margin-top: -0.5em;

      .click-hint {
        display: block;
        white-space: nowrap;
        padding: 0 0.3em;
        .transition(width .3s ease-out, height .2s ease-in-out);
      }
    }

    // One clicked -> Detail view.
    // The clicked one, in foreground
    &.upscaled {
      width: 100%;
      text-align: left;
      margin: 0;
      height: 70vh;

      h3.id-label {
        font-size: 2em;
      }

      div.node-main {
        height: 100%;
      }
    }

    // One clicked -> Detail view.
    // The not-clicked ones, hidden
    &.reduced {
      display: none;
    }

    // None clicked -> Overview.
    // Display all nodes.
    &.non-upscaled {
      &:hover {
        .node-main {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          background-color: @node-normal-hover;
        }
        .click-hint {
          color: black;
          height: 1.4em;
          background-color: @node-normal-hover;
          .transition(height .2s ease-in-out, width .2s ease-in-out, color .2s ease-in-out);
        }
      }
      .overview {
        display: block;
      }
      .details {
        display: none;
      }
    }

    &.upscaled {
      width: 100%-2%;
      .overview {
        display: none;
        .click-hint {
          height: 0;
          // opacity: 0;
        }
      }
      .details {
        display: block;

        .value-graph {
          width: 100%;
          height: 100%;
          text-align: center;
        }
      }
    }

    &.leader {
      .node-main {
        border-color: @node-leader;
      }

      &:hover {
        .node-main, .click-hint {
          border-color: @node-leader-hover;
        }

        .leader-label {
          color: @node-leader-hover;
        }

      }

      .leader-label {
        font-style: italic;
        font-size: 0.8em;
        color: @node-leader;
      }
    }

    &.summary {
      color: white;

      .node-main {
        background-color: @node-highlight;
      }

      &.non-upscaled:hover {
        .node-main, .click-hint {
          background-color: @node-highlight-hover;
          color: white;
        }
      }
    }

    .click-hint {
      color: transparent;
      overflow: hidden;
      height: 0;
      position: relative;
      border-color: transparent;
      border-width: 0 5px 0 5px;
      border-style: solid;
      border-bottom-left-radius: 0.5em;
      border-bottom-right-radius: 0.5em;
      box-sizing: border-box;
      padding: 0 1%;
      .transition(height .2s ease-in-out, width .2s ease-in-out, color .2s ease-in-out);
    }

    .click-hint-wrapper {
        border-bottom-left-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
    }

    .leader-edge {
      width: 0;
      height: 0;
    }
  }
}

#failure-table {
  width: 100%;
  margin: 5vh 0 0 0;
  font-variant: small-caps;

  h3 {
    margin: 0 auto 5px auto;
    text-align: center;
    width: 50%;
    /*height: 5vh;*/
    min-height: 30px;
    border-bottom: 1px solid white;
  }

  div#refresher {
    width: 30%;
    margin: 0 auto;

    button {
      color: black;
    }
  }

  #symbology {
    float:left;
    width: 8%;
    padding: 2%;
    height: 70vh;
    margin: 0;
    vertical-align: top;

    div.sym-section {
      width: 100%;
      float: left;
      margin-bottom: 5px;

      div.circle {
        margin-right: 5px;
        float: left;
        width: 24px;
        height: 24px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 12px;  // half of width and height -> circle

        &.type-init {
          background: @msg-init;
        }

        &.type-propose {
          background: @msg-propose;
        }

        &.type-prevote {
          background: @msg-prevote;
        }

        &.type-vote {
          background: @msg-vote;
        }

        div.ringHole {    // a circle contained in another circle to give the illusion of a ring
          margin: 6px;
          width: 12px;
          height: 12px;
          -moz-border-radius: 6px;
          -webkit-border-radius: 6px;
          border-radius: 6px;
          background: @bg-color;
        }
      }

      div.arrow {
        float: left;
        width: 24px;  // full space the arrow occupies
        height: 24px; // "

        div.head {    // head of an arrow
          float: left;
          margin: 6px 0;    // top and bottom margin = (arrowAreaHeight - borderLeftHeight)/2
          width: 0;
          height: 0;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;

          &.type-init {
            border-left: 12px solid @msg-init;  // arrow shall be half as big as the circles
          }

          &.type-propose {
            border-left: 12px solid @msg-propose;
          }

          &.type-prevote {
            border-left: 12px solid @msg-prevote;
          }

          &.type-vote {
            border-left: 12px solid @msg-vote;
          }
        }
        div.shaft {   // shaft / "stick" of an arrow
          float: left;
          margin: 10px 0; // top and bottom margin = (arrowAreaHeight - shaftHeight)/2
          width: 12px;  // half of the total arrow area
          height: 4px;  // doesn't follow any particular rule, tried out what looks best

          &.type-init {
            background: @msg-init;
          }

          &.type-propose {
            background: @msg-propose;
          }

          &.type-prevote {
            background: @msg-prevote;
          }

          &.type-vote {
            background: @msg-vote;
          }
        }
      }
    }

    div.top-label {
      width: 100%;
      font-variant: small-caps;
      font-size: 1.5em;         // I think it looks good this way..
    }

    div.sym-label {
      width: 100%;
      font-variant: small-caps;
    }
  }

  #timeline {
    float: left;
    width: 80%;
    height: 70vh;
    margin: 0 auto;
    vertical-align: top;
    overflow-y: scroll;

    .svg-content {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;

    }

    svg {
      .arrow, circle {
        &.type-init {
          stroke: @msg-init;
        }
        &.type-prevote {
          stroke: @msg-prevote;
        }
        &.type-propose {
          stroke: @msg-propose;
        }
        &.type-vote {
          stroke: @msg-vote;
        }
      }
      .arrow {
        stroke-width: 2px;
        fill: none;
      }
      circle {
        &.action-acknowledge {
          &.type-init {
            fill: @msg-init;
          }
          &.type-prevote {
            fill: @msg-prevote;
          }
          &.type-propose {
            fill: @msg-propose;
          }
          &.type-vote {
            fill: @msg-vote;
          }
        }
        &.action-send {
          fill-opacity: 0.0;
          stroke-width: 3;
        }
      }
    }
  }
}





// TOOLTIPS

.tooltipster-content {
  p.type, div.type {
    text-align: center;
    font-size: 0.5em;
    margin-bottom: -0.5em;
    margin-top: 0;
    span {
      font-weight: bold;
      text-transform: capitalize;
    }
  }
  p.value_store label span .node.different {
    text-decoration: line-through;
  }
}
// THEME
.makro_tooltipster_color(@color) {
  &.tooltipster-top,
  &.tooltipster-bottom {
    .tooltipster-box {
      border-left: 0 none #2a2a2a;
      border-right: 0 none #2a2a2a;
      border-bottom: 3px solid @color;
      border-top: 3px solid @color;
    }
    .tooltipster-arrow-border {
      border-bottom-color: @color;
      border-top-color: @color;
    }
  }
  &.tooltipster-left,
  &.tooltipster-right {
    .tooltipster-box {
      border-top: 0 none #2a2a2a;
      border-bottom: 0 none #2a2a2a;
      border-left: 3px solid @color;
      border-right: 3px solid @color;
    }
    .tooltipster-arrow-border {
      border-left-color: @color;
      border-right-color: @color;
    }
  }
  .tooltipster-content {
    color: @color;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-variant: normal;
  }
}
.tooltipster-sidetip.tooltipster-punk {
  &.tooltipster-punk-acknowledge-init,
  &.tooltipster-punk-send-init {
    .makro_tooltipster_color(@msg-init);
  }

  &.tooltipster-punk-acknowledge-propose,
  &.tooltipster-punk-send-propose {
    .makro_tooltipster_color(@msg-propose);
  }

  &.tooltipster-punk-acknowledge-prevote,
  &.tooltipster-punk-send-prevote {
    .makro_tooltipster_color(@msg-prevote);
  }

  &.tooltipster-punk-acknowledge-vote,
  &.tooltipster-punk-send-vote {
    .makro_tooltipster_color(@msg-vote);
  }
}
